<template>
  <div class="cart">
    <div class="top-cart">购物车</div>
    <!-- <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <!-- 渲染购物车商品 -->
    <van-swipe-cell
      v-for="prod in cart"
      :key="prod.id"
    >
      <!-- 商品卡片 -->
      <van-card
        :price="prod.price | money"
        :title="prod.title"
      >
        <!-- 自定义缩略图，添加复选框 -->
        <template #thumb>
          <!-- 复选框 -->
          <van-checkbox
          checked-color="#ee0a24"
          icon-size="16"
          :style="{marginRight: '6px'}"
          :value="prod.checked"
          @click="handleModifyChecked(prod.id)"
          ></van-checkbox>

          <!-- 商品图片 -->
          <div class="van-image"
            style="width: 75%; height: 100%;">
            <img :src="prod.image" class="van-image_img" style="object-fit: cover;">
          </div>
        </template>

        <!-- 自定义数量插槽，添加步进器使用 -->
        <template #num>
          <van-stepper
          :value="prod.amount"
          theme="round"
          button-size="16"
          @change="handleChangeAmount($event, prod.id)"
         />
        </template>
      </van-card>

      <!-- 自定义滑动单元格右侧插槽内部的按钮 -->
      <template #right>
        <van-button
         square
         text="删除"
         type="danger" class="delete-button"
         @click="handleRemove(prod.id)"
        />
      </template>
    </van-swipe-cell>

    <!-- 空状态提示 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车空空如也"
      v-if="cart.length === 0"
    >
      <van-button round type="danger" class="bottom-button"  @click="$router.push('/home')">去加购商品</van-button>
    </van-empty>

    <!-- 确认订单栏 -->
    <van-submit-bar
      :price="totalMoney"
      button-text="确认订单"
    >
      <van-checkbox
        :value="allChecked"
        @click="checkedAll({checked: !allChecked})"
        checked-color="#ee0a24"
      >全选</van-checkbox>

      <template #button>
        <van-button @click="$router.push('/con')" round type="info" class="confirm-botton">结算</van-button>
      </template>
    </van-submit-bar>

  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    /* 全选与总价 */
    ...mapGetters('cart', ['allChecked', 'totalMoney']),

    /* 购物车数组 */
    cart() {
      return this.$store.state.cart.list
    },
  },
  // created(){
  //   console.log('购物车：', this.$store)
  // }
  methods: {
    ...mapMutations('cart', ['modifyChecked', 'checkedAll']),

    /* 删除购物车商品 */
    handleRemove(id) {
      this.$store.commit('cart/removeFromCart', { id })
    },

    /* 修改购物车商品数量 */
    handleChangeAmount(amount, id) {
      this.$store.commit('cart/modifyAmount', { id, amount })
    },

    /* 处理商品行前复选框选中状态 */
    handleModifyChecked(id) {
      this.modifyChecked({ id })
    },

    /*  onClickLeft() {
      this.$router.back()
    }, */
  },

}
</script>

<style lang="less" scoped>
  .top-cart{
    width: 100%;
    height: 200px;
    background-color: #c1ab96;;
    font-size: 28px;
    text-align: left;
    color: #fff;
    font-weight: 888;
    line-height: 200px;
    padding-left: 30px;
  }
  .cart {
    padding-bottom: 168px;
  }
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  /deep/ .van-card__thumb {
    display: flex;
    width: 120px;
  }
  /deep/ .van-checkbox {
    margin-right: 6px;
  }

  .bottom-button {
    width: 250px;
    height: 100px;
    font-size: 15px;
    background-color: rgb(238, 189, 106);
    border: none;
  }
  .confirm-botton{
    background-color: rgb(240, 208, 152);
    width: 180px;
    height: 80px;
    border: none;
  }
  .van-image_img{
    width: 100px;
    height: 100px;
    border-radius: 3px;
  }
  .van-submit-bar{
    bottom: 55px;
  }
  .van-card{
    border:1px solid #c1ab96;
    border-radius: 10px;
    margin-top: 15px;
    height: 120px;
    margin-left: 10px;
    margin-right: 10px;
  }

</style>
